<template>
	<view class="edit-pet-container">
		<view class="form-header">
			<text class="title">编辑宠物信息</text>
		</view>
		
		<view class="pet-form">
			<!-- 宠物头像上传 -->
			<view class="avatar-upload" @tap="chooseImage">
				<image :src="formData.avatar || '/static/img/default-pet-avatar.svg'" mode="aspectFill" class="avatar-preview"></image>
				<view class="upload-mask">
					<u-icon name="camera-fill" color="#FFFFFF" size="40"></u-icon>
					<text>点击更换头像</text>
				</view>
			</view>
			
			<!-- 宠物信息表单 -->
			<view class="form-group">
				<view class="input-item">
					<text class="label">宠物名字</text>
					<input type="text" v-model="formData.name" placeholder="给宠物起个名字吧" />
				</view>
				
				<view class="input-item">
					<text class="label">宠物类型</text>
					<picker @change="onTypeChange" :value="typeIndex" :range="petTypes">
						<view class="picker-value">{{petTypes[typeIndex]}}</view>
					</picker>
				</view>
				
				<view class="input-item">
					<text class="label">品种</text>
					<input type="text" v-model="formData.breed" placeholder="请输入宠物品种" />
				</view>
				
				<view class="input-item">
					<text class="label">性别</text>
					<picker @change="onGenderChange" :value="genderIndex" :range="genderTypes">
						<view class="picker-value">{{genderTypes[genderIndex]}}</view>
					</picker>
				</view>
				
				<view class="input-item">
					<text class="label">出生日期</text>
					<picker mode="date" :value="formData.birthday" @change="onBirthdayChange">
						<view class="picker-value">{{formData.birthday || '请选择日期'}}</view>
					</picker>
				</view>
				
				<view class="input-item">
					<text class="label">毛色</text>
					<input type="text" v-model="formData.color" placeholder="请输入宠物毛色" />
				</view>
				
				<view class="input-item">
					<text class="label">体重(kg)</text>
					<input type="digit" v-model="formData.weight" placeholder="请输入宠物体重" />
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<button class="submit-btn" @tap="submitForm">保存修改</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				petId: '',
				formData: {
					avatar: '',
					name: '',
					type: 'cat',
					breed: '',
					gender: 'male',
					birthday: '',
					color: '',
					weight: ''
				},
				petTypes: ['猫咪', '狗狗'],
				typeIndex: 0,
				genderTypes: ['公', '母'],
				genderIndex: 0
			}
		},
		onLoad(options) {
			if (options.petId) {
				this.petId = options.petId;
				this.loadPetInfo();
			}
		},
		methods: {
			// 加载宠物信息
			async loadPetInfo() {
				try {
					uni.showLoading({ title: '加载中...' });
					
					const query = new this.$leanCloud.Query('Pet');
					const pet = await query.get(this.petId);
					
					if (pet) {
						this.formData = {
							avatar: pet.get('avatar') || '',
							name: pet.get('name') || '',
							type: pet.get('type') || 'cat',
							breed: pet.get('breed') || '',
							gender: pet.get('gender') || 'male',
							birthday: pet.get('birthday') || '',
							color: pet.get('color') || '',
							weight: pet.get('weight') || ''
						};
						
						// 设置选择器索引
						this.typeIndex = this.formData.type === 'cat' ? 0 : 1;
						this.genderIndex = this.formData.gender === 'male' ? 0 : 1;
					}
					
					uni.hideLoading();
				} catch (error) {
					console.error('加载宠物信息失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			},
			
			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async (res) => {
						const tempFilePath = res.tempFilePaths[0];
						
						try {
							uni.showLoading({ title: '上传中...' });
							
							// 上传图片到LeanCloud
							const file = new this.$leanCloud.File('pet-avatar.jpg', {
								blob: {
									uri: tempFilePath
								}
							});
							await file.save();
							
							this.formData.avatar = file.url();
							uni.hideLoading();
						} catch (error) {
							console.error('上传图片失败:', error);
							uni.showToast({
								title: '上传图片失败',
								icon: 'none'
							});
						}
					}
				});
			},
			
			// 类型选择
			onTypeChange(e) {
				this.typeIndex = e.detail.value;
				this.formData.type = this.typeIndex === 0 ? 'cat' : 'dog';
			},
			
			// 性别选择
			onGenderChange(e) {
				this.genderIndex = e.detail.value;
				this.formData.gender = this.genderIndex === 0 ? 'male' : 'female';
			},
			
			// 生日选择
			onBirthdayChange(e) {
				this.formData.birthday = e.detail.value;
			},
			
			// 提交表单
			async submitForm() {
				if (!this.validateForm()) return;
				
				try {
					uni.showLoading({ title: '保存中...' });
					
					const pet = this.$leanCloud.Object.createWithoutData('Pet', this.petId);
					
					// 更新宠物信息
					pet.set('avatar', this.formData.avatar);
					pet.set('name', this.formData.name);
					pet.set('type', this.formData.type);
					pet.set('breed', this.formData.breed);
					pet.set('gender', this.formData.gender);
					pet.set('birthday', this.formData.birthday);
					pet.set('color', this.formData.color);
					pet.set('weight', parseFloat(this.formData.weight) || 0);
					
					await pet.save();
					
					uni.hideLoading();
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					});
					
					// 返回上一页并刷新
					setTimeout(() => {
						const pages = getCurrentPages();
						const prevPage = pages[pages.length - 2];
						prevPage.$vm.loadPetInfo();
						uni.navigateBack();
					}, 1500);
					
				} catch (error) {
					console.error('保存宠物信息失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					});
				}
			},
			
			// 表单验证
			validateForm() {
				if (!this.formData.name.trim()) {
					uni.showToast({
						title: '请输入宠物名字',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.breed.trim()) {
					uni.showToast({
						title: '请输入宠物品种',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.birthday) {
					uni.showToast({
						title: '请选择出生日期',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			}
		}
	}
</script>

<style lang="scss">
	.edit-pet-container {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 40rpx;
	}
	
	.form-header {
		height: 120rpx;
		background: linear-gradient(to right, #FF9F7A, #FFC0A9);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		
		.title {
			font-size: 36rpx;
			color: #fff;
			font-weight: bold;
		}
	}
	
	.pet-form {
		padding: 0 30rpx;
		
		.avatar-upload {
			width: 200rpx;
			height: 200rpx;
			margin: 0 auto 40rpx;
			position: relative;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
			
			.avatar-preview {
				width: 100%;
				height: 100%;
			}
			
			.upload-mask {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0,0,0,0.5);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				text {
					color: #fff;
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
		}
		
		.form-group {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-bottom: 40rpx;
			
			.input-item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f0f0f0;
				
				&:last-child {
					border-bottom: none;
				}
				
				.label {
					width: 160rpx;
					font-size: 28rpx;
					color: #666;
				}
				
				input {
					flex: 1;
					font-size: 28rpx;
					color: #333;
				}
				
				.picker-value {
					flex: 1;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
		
		.submit-btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background: linear-gradient(to right, #FF9F7A, #FFC0A9);
			color: #fff;
			font-size: 32rpx;
			border-radius: 45rpx;
			text-align: center;
			box-shadow: 0 8rpx 16rpx rgba(255, 159, 122, 0.3);
		}
	}
</style> 